<template>
	<view class="bigbox">
		<!-- logo -->
		<image src="../../static/logo.png" mode=""></image>
		<view class="title"><text >欢迎进入车主APP</text></view>
		<!-- 账号 -->
		<input type="text" value="" placeholder="账号" v-model="account" @input="onAccountIpt" />
		<!-- 密码 -->
		<view class="bt">
			<input type="text" value="" placeholder="密码" v-model="pwd" :password="!showPwd" />
			<text class="pwd" @click="showPwd = !showPwd">{{ showPwd ? '隐藏' : '显示'}}密码</text>
		</view>
		<view class="dibu">
			<text>忘记密码</text>
			<text @click="goReg()">用户注册</text>
		</view>
		<button type="primary" @click="onSub()">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				pwd: '',
				showPwd: ''
			}
		},
		methods: {
			goReg() {
				uni.navigateTo({
					url: '../reg/reg'
				})
			},
			onSub() {
				if (!this.account) {
					return uni.showToast({
						title: "账号不能为空!",
						icon: 'error'

					})
				}
				if (!this.pwd) {
					return uni.showToast({
						title: "密码不能为空!",
						icon: 'error'

					})
				}

				uni.reLaunch({
					url: '../home/home'
				})
			},
			onAccountIpt(e) {
				const v = e.detail.value;
				const f = v.replace(/[^a-zA-Z0-9]/g, '')
				this.account = v
				this.$nextTick(function() {
					this.account = f
				})
			}

		}
	}
</script>

<style>
page{
	background: linear-gradient(#e6f2ff,white);
}
.bigbox{
	padding: 190rpx 60rpx;
}
.title{
	font-size: 35rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40rpx;
}
image{
	width: 240rpx;
	height: 240rpx;
	margin-left: 188rpx;
	border-radius: 100rpx;
	margin-bottom: 40rpx;
}
input{
	line-height: 100rpx;
	height: 100rpx;
	margin-bottom: 30rpx;
/* 	border: 2rpx solid #FFFFFF; */
	border-radius: 35rpx;
	background-color: #edf3ff;
}
.bt{
	display: flex;
	justify-content: space-between;
	line-height: 100rpx;
		height: 100rpx;
		margin-bottom: 30rpx;
	/* 	border: 2rpx solid #FFFFFF; */
		border-radius: 35rpx;
		background-color: #edf3ff;
}
.bt>text{
	color: #999999;
	font-size: 26rpx;
	text-align: center;
	
}
.pwd{
		line-height: 100prx;
		height: 100rpx;
	}
.dibu{
		display: flex;
		justify-content: space-between;
		color: #007AFF;
		font-size: 26rpx;
	}
	button{
		border-radius: 46rpx;
		height: 100rpx;
		margin-top: 100rpx;
		background-color: #3798ff;
	}
</style>
